@ts-nocheck
<template>
  <div style="height: 100%">
    <div class="wrapper-outer">
      <div class="wrapper-button">
        <span style="font-weight: bold">时段</span>
        <div>
          <el-button
            type="primary"
            icon="Plus"
            @click="$emit('clickCreate')"
            circle
          ></el-button>
          <el-button
            type="danger"
            icon="Delete"
            :disabled="capacityStore.checkStatus() != 0"
            @click="$emit('clickDelete')"
            circle
          >
          </el-button>
        </div>
      </div>
      <div class="wrapper-inner" @click="handleCleanSelection">
        <el-scrollbar height="100%">
          <div class="wrapper-content">
            <el-button
              v-for="(item, index) in recordList"
              :class="[
                'timeline-button',
                selectedRecordIndex == index ? 'timeline-button-selected' : '',
              ]"
              :type="
                capacityStore.checkStatus(index) == -1
                  ? 'info'
                  : capacityStore.checkStatus(index) == 1
                  ? 'success'
                  : 'primary'
              "
              :plain="
                selectedRecordIndex != index ||
                capacityStore.checkStatus(index) == -1
              "
              @click.stop="handleSelect(index)"
            >
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                "
              >
                <div style="margin-bottom: 12px">
                  <span
                    >{{
                      dayjs(item.start).format("MM/DD HH:mm")
                    }}&nbsp;PEK</span
                  >
                </div>
                <div style="margin-bottom: 12px">
                  <span
                    >{{ dayjs(item.end).format("MM/DD HH:mm") }}&nbsp;PEK</span
                  >
                </div>
                <div>
                  <span>通行能力</span>
                  <span>{{
                    capacityStore.computedTotalCapacity(index).value
                  }}</span>
                  <span>架/时</span>
                </div>
              </div>
            </el-button>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, nextTick, onMounted, onUnmounted } from "vue";

// import dateFormat from "@/utils/dateFormat.js";
// use dayjs instead of dateFormat;
import dayjs from "dayjs";

import useCapacityStore from "@/store/capacity";
const capacityStore = useCapacityStore();
const recordList = computed(() => capacityStore.recordList);
const selectedRecordIndex = computed(() => capacityStore.selectedRecordIndex);

let visible = true;
let timer = null;

const selectedRecord = computed(() => {
  if (selectedRecordIndex.value == -1) return null;
  if (recordList.value.length == 0) return null;
  if (selectedRecordIndex.value >= recordList.value.length) return null;
  return recordList.value[selectedRecordIndex.value];
});

function handleSelect(index) {
  capacityStore.setSelectedRecordIndex(index);
  // capacityStore.selectedRecordIndex = index;
}

function handleCleanSelection() {
  if (
    capacityStore.selectedRecordStatus != 1 &&
    capacityStore.selectedRecordStatus != 2
  ) {
    handleSelect(-1);
  }
}

function validSelectedItem() {
  visible = false;
  if (!recordList.value || recordList.value.length == 0) return null;
  if (capacityStore.checkStatus() != 2) return null;
  // if (capacityStore.checkStatus() != 0 && capacityStore.checkStatus() != 1) {
  for (let i = 0; i < recordList.value.length; i++) {
    // try to find another valid item and set it as selected
    let iStatus = capacityStore.checkStatus(i);
    if (
      iStatus == 1 &&
      capacityStore.checkStatus() != 1 &&
      capacityStore.checkStatus() != 0
    ) {
      // item is valid and effected
      console.log("item is valid and effected index ", i);
      handleSelect(i);
      // return null;
      break;
    }
    // if (iStatus == 0 && capacityStore.checkStatus() != 0) {
    //   console.log("item is valid but not effected, index ", i);
    //   handleSelect(i);
    // }
  }
  // }
  nextTick(() => {
    visible = true;
  });
}

onMounted(() => {
  validSelectedItem();
  timer = setInterval(() => {
    validSelectedItem();
  }, 500);
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style scoped>
* {
  box-sizing: border-box;
}

.wrapper-outer {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.wrapper-button {
  height: 60px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.wrapper-inner {
  width: 100%;
  height: calc(100% - 60px);
}

.wrapper-content {
  padding: 24px 24px;
}

.timeline-button {
  display: inline;
  /* text-align: justify; */
  margin: 16px 0;
  width: 100%;
  height: 100px;
  transition: all 0.25s ease-in-out;
}

/* .timeline-button:hover, */
.timeline-button-selected {
  transform: scale(1.1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.command-button {
  font-size: 20px;
  padding: 8px 0;
  width: calc(50% - 6px);
  /* margin-right: 6px; */
  transition: all 0.25s ease-in-out;
}

.command-button:hover {
  transform: scale(1.05);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

.wrapper-inner:last-child {
  border-bottom: none;
}
</style>
